<template>
	<zero-custom-bar :effect="false" color="#fff" title='年检代办'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)" :singleIcon="true"></zero-custom-bar>
	<view class="header-title">
		<view class="">
			<image src="../../static/icon5.png" mode="widthFix"></image>
			<text>支持年检、保养、洗车等服务</text>
		</view>
		<view class="">
			<image src="../../static/icon6.png" mode="widthFix"></image>
			<text>个人信息安全保障</text>
		</view>
	</view>
	<view class="box">
		<view class="ts">
			<image src="../../static/warring.png" mode=""></image>
			<text>上传的图片保证清晰，信息不缺失，图片不歪斜！请严格按照要求上传。</text>
		</view>
		<view class="upload">
			<view class="item" @click="onUpload(1)">
				<image :src="form.licenseFirstUrl" class="pic" v-if="form.licenseFirstUrl" mode=""></image>
				<view class="placeholder" v-else>
					<image src="/static/icon7.png" mode=""></image>
					<text>行驶证正本</text>
				</view>
				
			</view>
			<view class="item" @click="onUpload(2)">
				<image :src="form.licenseSecondUrl" class="pic"  v-if="form.licenseSecondUrl" mode=""></image>
				<view class="placeholder" v-else>
					<image src="/static/icon7.png" mode=""></image>
					<text>行驶证副本</text>
				</view>
			</view>
		</view>
	</view>
	<view class="box-form">
		<view class="item">
			<text class="label">车主姓名</text>
			<input type="text" placeholder="请输入" v-model="form.carOwnerName" placeholder-class="placeholder">
		</view>
		<view class="item">
			<text class="label">联系电话</text>
			<input type="text" placeholder="请输入" v-model="form.connectPhone" placeholder-class="placeholder">
		</view>
		<picker mode="region" @change="handleAreaChange">
			<view class="item">
				<text class="label">所在地区</text>
				<text class="placeholder">{{form.areaName || '请选择'}}</text>
				<image class="right" src="/static/right.png" mode=""></image>
			</view>
		</picker>
		


		<view class="item">
			<text class="label">详细地址</text>

			<input type="text" placeholder="请输入" v-model="form.areaInfo" placeholder-class="placeholder">
			
		</view>
		<picker mode="multiSelector" :range="datetimeList" @change="handleDateTimeChange">
			<view class="item">
				<text class="label">预约时间</text>
				<text class="placeholder">{{form.appointmentTime || '请选择'}}</text>
				<image class="right" src="/static/right.png" mode=""></image>
			</view>
		</picker>
		


	</view>
	<button class="btn" @click="submit">确认提交</button>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		reactive, ref
	} from 'vue';
	import {wxOpenid,checkLogin} from '@/utils/login-sdk.js'
	import {
		uploadFile
	} from '@/utils/request.js'
	import {
		getDaysAfter20
	}from '@/utils/date20.js'
	import {
		orderPreAnnual
	}from '@/api'
	onLoad(async (params) => {
		const {memberId} = await wxOpenid()
		form.memberId = memberId
		form.carInfoId = params.carInfoId
		form.productInfoId = params.productInfoId
		form.orderAmount = params.orderAmount
	})
	const form = reactive({
		"memberId": "", //会员ID
		"licenseFirstUrl": "", //行政证第一张图片
		"licenseSecondUrl": "", //行政证第二张图片
		"areaId": "", //区域编码
		"areaInfo": "", //所在地区
		"carOwnerName": "", //车主姓名
		"connectPhone": "", //联系电话
		"appointmentTime": "", //预约时间
		"carInfoId": "",
		"productInfoId": "",
		"areaName":"",
		"orderAmount":""
		
	})
	const datetimeList = ref(getDaysAfter20())
	/** 上传图片 */
	const onUpload = (index)=>{
		uni.chooseImage({
			count:1,
			success: async (res) => {
				const data = await uploadFile(res.tempFilePaths[0])
				const result = JSON.parse(data.data)
				if(index==1){
					form.licenseFirstUrl = result.data.url
				}else{
					form.licenseSecondUrl = result.data.url
				}
				
			}
		})
	}
	/** 选择地区 */
	const handleAreaChange = (e)=>{
		console.log(e,e.detail.code[e.detail.code.length-1])
		form.areaId = e.detail.code[e.detail.code.length-1]
		form.areaName = e.detail.value.toString()
	}
	/** 选择预约时间 */
	const handleDateTimeChange = (e)=>{
		console.log(e)
		let d = e.detail.value[0]
		let t = e.detail.value[1]
		form.appointmentTime = datetimeList.value[0][d]+' '+datetimeList.value[1][t]
		console.log(form.appointmentTime)
	}
	/** 提交 */
	const submit = async() => {
		const res = await orderPreAnnual(form)
		uni.navigateTo({
			url: "/pages/pay/pay?preOrderId="+res.result.preOrderId+'&orderAmount='+form.orderAmount+'&token='+res.result.token+'&businessType=1'
		})
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #F7F4F0 49%, ) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);

		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		background-attachment: fixed
	}

	.header-title {
		display: flex;
		justify-content: space-between;
		width: 640rpx;
		margin: 60rpx auto 24rpx;

		view {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 24rpx;
				margin-right: 8rpx;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFF6EA;

			}
		}
	}

	.box {
		width: 640rpx;
		height: 384rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 0 auto;
		padding: 0 30rpx;
		overflow: hidden;

		.ts {
			display: flex;
			margin-top: 36rpx;
			align-items: flex-start;

			image {
				display: block;
				width: 23rpx;
				height: 23rpx;
				margin-right: 5rpx;

			}

			text {
				display: block;
				font-size: 24rpx;
				color: #A1A1A1;
				width: 549rpx;
			}
		}

		.upload {
			display: flex;
			margin-top: 30rpx;
			justify-content: space-between;
			
			.item {
				width: 312rpx;
				height: 218rpx;
				background: rgba(255, 221, 179, 0.28);
				border-radius: 28rpx;
				.pic{
					width: 312rpx;
					height: 218rpx;
					display: block;
					border-radius: 28rpx;
				}
				.placeholder {
					width: 312rpx;
					height: 218rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					image {
						width: 53rpx;
						height: 47rpx;
						display: block;
						margin-bottom: 14rpx;
					}

					text {
						font-size: 30rpx;
						color: #FE9C24;
					}
				}
			}
		}
	}

	.box-form {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 20px auto;
		padding: 0 30rpx;

		.item {
			height: 99rpx;
			display: flex;
			align-items: center;

			.label {
				display: block;
				font-size: 28rpx;
				color: #2B2B2B;
				width: 220rpx;
			}

			.right {
				display: block;
				width: 48rpx;
				height: 48rpx;
			}

			.placeholder {
				font-size: 26rpx;
				color: #A7A7A7;
				flex: 2;
			}

			input,
			.value {
				font-weight: 400;
				font-size: 26rpx;
				color: #2B2B2B;
				flex: 2;
			}

			.radio-group {
				display: flex;
				flex: 2;

				.radio-item {
					display: flex;
					align-items: center;
					flex: 2;

					image {
						display: block;
						width: 48rpx;
						height: 48rpx;
						flex-shrink: 0;
					}

					text {
						font-size: 28rpx;
						color: #2B2B2B;
					}
				}
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		margin-left: 55rpx;
		margin-top: 100rpx;

	}
</style>